<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Tab 1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Tab 1</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-button @click="test">Default1</ion-button>
      <ion-button @click="test">Default2</ion-button>
      {{ text }}
      <ExploreContainer name="Tab 1 page" />
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonButton,
  toastController,
} from "@ionic/vue";
import ExploreContainer from "@/components/ExploreContainer.vue";
import Echo from "../utils/plugin";
import { getCurrentInstance, onMounted, ref } from "vue";
import { SQLiteDBConnection, SQLiteHook } from "vue-sqlite-hook/dist";
import {
  createTablesNoEncryption,
  dropTablesTablesNoEncryption,
  importTwoUsers,
} from "@/utils/utils-db-no-encryption";
import { deleteDatabase } from "@/utils/utils-delete-db";

export default {
  components: {
    ExploreContainer,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonPage,
    IonButton,
  },
  setup() {
    const app = getCurrentInstance();
    const sqlite: SQLiteHook = app?.appContext.config.globalProperties.$sqlite;
    const noEncryptionTest = async (): Promise<boolean> => {
      try {
        let res: any = await sqlite.echo("Hello from echo");
        if (res.value !== "Hello from echo") {
          return false;
        }
        console.log(`after echo ${JSON.stringify(res)}`);
        const db: SQLiteDBConnection = await sqlite.createConnection(
          "NoEncryption"
        );
        console.log("SQLiteDBConnection", db);
        await deleteDatabase(db);
        await db.open();

        res = await db.execute(dropTablesTablesNoEncryption);
        console.log("execute1", res);
        res = await db.execute(createTablesNoEncryption);
        console.log("execute2", res);
        res = await db.execute(importTwoUsers);
        console.log("execute3", res);

        res = await db.query("SELECT * FROM users");
        console.log("query1", res);
        let sqlcmd = "INSERT INTO users (name,email,age) VALUES (?,?,?)";
        let values: Array<any> = ["Simpson", "Simpson@example.com", 69];
        res = await db.run(sqlcmd, values);
        console.log("run1", res);
        res = await db.query("SELECT * FROM users");
        console.log("query2", res);

        sqlcmd =
          `INSERT INTO users (name,email,age) VALUES ` +
          `("Brown","Brown@example.com",15)`;
        res = await db.run(sqlcmd);
        console.log("run2", res);
        res = await db.query("SELECT * FROM users");
        console.log("query3", res);

        sqlcmd = "SELECT name,email,age FROM users WHERE age > ?";
        values = ["35"];
        res = await db.query(sqlcmd,values);
        console.log("query4", res);

        await sqlite.closeConnection("NoEncryption"); 
        
        return true;
      } catch (error: any) {
        console.log("error", error);
        return false;
      }
    };
    const text = ref("");
    const test = async () => {
      const res = await Echo.echo({ value: "Hello World!" });
      text.value = JSON.stringify(res);
      const toast = await toastController.create({
        message: res.value,
        duration: 1500,
        position: "bottom",
      });
      await toast.present();
      // console.log("Response from native:", res.value);
    };

    onMounted(async () => {
      const retNoEncryption: boolean = await noEncryptionTest();
      console.log(`retNoEncryption ${retNoEncryption}`);
    });
    return {
      test,
      text,
    };
  },
};
</script>
